<link  type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet"/>
<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
      dir: 'https://www.layuicdn.com/layui/' 
      ,version: false 
      ,debug: false 
      ,base: '' 
    });
</script>



<!-- 框架的组件文档 "https://www.layui.com/doc/modules/slider.html" -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	<legend style="font-size: 14px">基本滑块</legend>
</fieldset>
<div id="slideTest1" class="demo-slider"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	<legend style="font-size: 14px">定义初始值</legend>
</fieldset>
<div id="slideTest2" class="demo-slider"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	<legend style="font-size: 14px">设置最大最小值</legend>
</fieldset>
<div id="slideTest3" class="demo-slider"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	<legend style="font-size: 14px">设置步长</legend>
</fieldset>
<div id="slideTest4" class="demo-slider"></div>

<script type="text/javascript">
	layui.use('slider', function(){
		var $ = layui.$
		,slider = layui.slider;
		  //默认滑块
		  slider.render({
		  	elem: '#slideTest1'
		  });
		  
		  //定义初始值
		  slider.render({
		  	elem: '#slideTest2'
		    ,value: 20 //初始值
		});
		  
		  //设置最大最小值
		  slider.render({
		  	elem: '#slideTest3'
		    ,min: 20 //最小值
		    ,max: 50 //最大值
		});
		  
		  //设置步长
		  slider.render({
		  	elem: '#slideTest4'
		    ,step: 10 //步长
		    ,showstep: true //开启间隔点
		});	  
	});
</script>